<template>
	<view class="content">
		
		<div class="chat-container">
		    <div class="chat-header">
		<!--        <h1 id="title">数字生命</h1>-->
		    <img id = "avatar" src="chenxiaoyunpicture.png" alt="avatar">
		
		    </div>
		    <div class="message-container">
		    <div class="chat-messages">
		        <!-- 消息内容将在这里动态显示 -->
		    </div>
		    </div>
		    <div class="chat-input">
		        <input type="text" id="message-input" ref="message1" v-model="inputValue" placeholder="输入消息...">
		        <button id="send-button" @click="showInput"><p id = "send-message" ref="button1">发送</p></button>
		    </div>
		</div>
		
		
		<!-- 按钮，用于触发模态对话框 -->
		<button id="openModal" style="display: none">打开对话框</button>
		
		<!-- 模态对话框 -->
		<div id="myModal" class="modal">
		    <!-- 模态内容 -->
		    <div class="modal-content">
		        <!-- 头部 -->
		        <span class="close">&times;</span>
		        <p>请告诉我我哪里说得不太合适了？我应该怎么改？</p>
		        <!-- 输入框 -->
		        <input type="text" id="feedback-input" placeholder="输入您觉得我应该改进的地方...">
		        <!-- 发送按钮 -->
		        <button id="feedback-button">记住了吗？</button>
		    </div>
		</div>
		<!--提示信息-->
		<div id="info-tip">这是一条提示信息，它将在一秒后自动关闭。</div>
		
	</view>
	
	
</template>
<script>
export default {
  data() {
    return {
      inputValue: '', // 输入框的值
      senderMessage: null, // 发送者的消息元素
      receiverMessage: null, // 接收者的消息元素
    };
  },
  onLoad() {
  	console.log("加载");
	
  },
  mounted() {
  	const messageListElement = this.$refs.button1;
	
  },
  methods: {
    sendMessage() {
      if (this.inputValue.trim() !== '') {
        // 创建消息元素
        this.senderMessage = uni.createSelectorQuery().select('#message-input');
        this.senderMessage.fields({ node: true }).exec((res) => {
          if (res[0]) {
            const messageElement = res[0].node;
            messageElement.classList.add('message', 'sender');
            messageElement.textContent = this.inputValue;
            this.$refs.messages.appendChild(messageElement);
            this.inputValue = ''; // 清空输入框
          }
        });
      }
    },
	showInput(){
		
		console.log(this.senderMessage.textContent);
	}
	
	
  }
};



</script>

<!-- <script src = "./script.js"></script> -->

<style>
/* .content {
	text-align: center;
	height: 400upx;
	 margin-top: 200upx;
 } */

/* styles.css */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: 94vh;
    background-color: #f7f7f7;
}

.chat-header {
    /*background-color: #ffdfba;*/
    /*background-color: #820cb0;*/
    background-color: white;

    display: none;
    /*padding: 20px;*/
    text-align: center;
    height: 30%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

#avatar {

    height: 90%;
    width: auto;
    border-radius: 50%;
    margin-top: 10px;
    margin-bottom: 10px;
}

.message-container {
    flex: 1;
    display: flex;
    flex-direction: column;
	height: 50%;
    overflow-y: auto;
    background-color: #fff;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.chat-messages {
    flex: 1;
	
    display: flex;
    max-height: 100%;
    flex-direction: column;
    align-items: flex-start; /* 对齐左侧 */
    justify-content: space-between;
    padding: 20px;
    overflow-y: auto;
    background-color: #fff;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

    /*justify-content: space-between;*/
}

.chat-input {
	/* display: none; */
	height: 5.5%;
    display: flex;
    padding: 0px;
    background-color: white;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.chat-input input {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background: #e8e8e8;
}

.chat-input button {
    /* padding: 10px 20px; */
    /*background-color: #ffa07a;*/

    background-color: #820cb0;
	height: 100%;
	width: 20%;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
	
	
	display: flex; /* 启用Flexbox布局 */
	  align-items: center; /* 垂直居中对齐 */
	  justify-content: center; /* 水平居中对齐，如果需要的话 */
	/* justify-content: center; */
}

#send-message{
	
	height: 100%;
}

.chat-input button:hover {
    /*background-color: #ff7f50;*/
}

/* 消息样式 */
.message {
    /*background-color: #ffdfba;*/
    background-color: #ffdfba;

    padding: 10px;
    margin-bottom: 10px;
    border-radius: 20px;
    /*justify-content: flex-end; !* 添加这一行 *!*/
    justify-content: space-between; /* 添加这一行 */
    align-self: flex-end;
    max-width: 100%; /* 限制最大宽度，可以根据需要调整 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */

}

#title {
    /*color: #820cb0;*/
    color: white;

}
.message.sender {
    /*display: inline-block;*/
    text-align: right;
    justify-content: space-between; /* 添加这一行 */
    align-self: flex-end;
    background-color: #f0f0f0; /* 背景颜色，可以根据需要调整 */
    border-radius: 10px; /* 圆角 */
    padding: 10px;
    max-width: 100%; /* 限制最大宽度，可以根据需要调整 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */

    color: #820cb0;
    /*background-color: #ffa07a;*/
    /*background-color: #ffa07a;*/

}

.message.receiver {
    /*display: inline-block;*/
    font-weight: 500; /* 设置字体粗细程度为600 */
    align-self: flex-start;
    border-radius: 10px; /* 圆角 */
    /*background-color: purple;*/
    /*background-color: #820cb0;*/
    background-color: #f0f0f0;

    color: black;

    /*position: relative;*/
}

.like-button {
    border-radius: 30%; /* 使边缘变圆 */
    background-color: #ecc2d2; /* 设置背景颜色为稍微更深一点的灰色 */
    border: 0px solid #000; /* 设置边框宽度为1px，颜色为黑色 */
    margin-right: 10px; /* 在like-button的右侧添加10像素的间隔 */
}

.like-button img {
    width: 2em;
    height: 2.5em;
}

.dislike-button img {
    width: 2em;
    height: 2.5em;
}

.dislike-button {
    border-radius: 30%; /* 使边缘变圆 */
    background-color: #ecc2d2; /* 设置背景颜色为稍微更深一点的灰色 */
    border: 0px solid #000; /* 设置边框宽度为1px，颜色为黑色 */

}

.split{
    border: 1px solid #ddd;
}

/* 模态对话框的样式 */
.modal {
    display: none; /* 默认不显示 */
    position: fixed; /* 固定定位 */
    z-index: 1; /* 确保模态对话框在最上层 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 允许滚动 */
    background-color: rgb(0,0,0); /* 半透明背景 */
    background-color: rgba(0,0,0,0.4); /* 黑色背景带透明度 */
}

/* 模态内容的样式 */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 居中显示 */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* 或者使用具体像素值 */
}

/* 关闭按钮的样式 */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* 输入框和按钮的样式 */
#feedback-input, #feedback-button {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 20px;
}

#feedback-button{
    background-color: rgba(125,23,162,0.97);
    color: white;
    cursor: pointer;
    font-weight: 600; /* 设置字体粗细程度为600 */
    font-size: large;
}

#info-tip {
    display: none; /* 初始时不显示 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(125,23,162,0.97);
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000; /* 确保提示信息在最上层 */
    transition: opacity 3s ease-in-out; /* 添加渐变效果,但是没起作用 */
}

/*#feedback-button:hover {*/
/*    background-color: #45a049;*/
/*}*/

</style>
